<template>
  <div
    class="flex-1 h-full card-scroll flex-col flex"
    border-r="1px solid border-lighter"
  >
    <div
      border-b="1px solid  border-lighter"
      class="h-56 flex items-center px-10"
    >
      <el-input placeholder="搜索" v-model:value="keywords">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" class="ml-10" @click="formEl?.onOpen('add')">
        <template #icon>
          <el-icon><Plus></Plus></el-icon>
        </template>
        新增
      </el-button>
    </div>
    <div class="p-12 overflow-y-auto">
      <el-tree
        highlight-current
        node-key="key"
        :data="searchResult"
        :current-node-key="currentDict"
        class="f-tree"
      ></el-tree>

      <DictForm
        ref="formEl"
        type="字典"
        @add="onAdd"
        @update="onUpdate"
      ></DictForm>
    </div>
  </div>
</template>

<script setup lang="ts">
import DictForm from "@/views/system/dict/components/dict-form.vue";
import dictApi, { DictDto } from "@/api/dict.ts";
import { onMounted } from "vue";
import { Plus, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const currentDict = defineModel<string | null>("currentDict", {
  default: null,
});
const formEl = ref();

const onSelect = (item: DictDto) => {
  if (item.code !== currentDict.value) {
    currentDict.value = item.code;
  }
};
const keywords = ref<string>();
const loading = ref<boolean>(false);
const dictList = ref<Array<DictDto>>([]);
const searchResult = computed(() => {
  const list = keywords.value
    ? dictList.value.filter(
        (item) =>
          item.code!.includes(keywords.value!) ||
          item.name!.includes(keywords.value!),
      )
    : dictList.value;

  return list.map((item) => ({
    label: item.name,
    key: item.code,
  }));
});
const render = () => {
  loading.value = true;
  dictApi.all().then((rep) => {
    dictList.value = rep.data;
    if (dictList.value.length > 0) {
      currentDict.value = dictList.value[0].code;
    }

    loading.value = false;
  });
};
const onAdd = (form: DictDto, callback: Function) => {
  dictApi
    .create(form)
    .then(() => {
      render();
      callback(true);
    })
    .catch(() => {
      callback(false);
    });
};
const onUpdate = (form: DictDto, callback: Function) => {
  dictApi.update(form.code!, form).then(() => {
    render();
    callback();
  });
};
const onEdit = (item: any) => {
  formEl.value?.onOpen("edit", item);
};
const onDelete = (item: DictDto) => {
  Modal.confirm({
    title: "提示",
    type: "info",
    content: `确认删除【${item.name}】?`,
    onOk() {
      dictApi.delete(item.code!).then(() => {
        ElMessage.success("删除成功");
        render();
      });
    },
    onCancel() {},
  });
};

onMounted(render);
</script>

<style lang="scss" scoped>
::v-deep(.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle) {
  line-height: 28px;
}
</style>
